<template>
    <div class="login">
        <div class="content">
           <h4>登录账号</h4>
           <p>虾米 - 严选商城欢迎您</p>
           <my-input placeholder="手机号" 
           :class="phonePass==0? '' : phonePass==1? 'success' : 'error'" v-model="mobile" 
           @blur="rePhone">
              <span class="err" v-if="phonePass==2">必填</span>
              <i class="iconfont icon-shouji"></i>
           </my-input>
           <my-input placeholder="密码"
           :class="pwdPass==0? '' : pwdPass==1? 'success' : 'error'"
            v-model="pwd" 
            @blur="rePwd"
            :inType="showPwd?'text':'password'">
               <van-icon :name="showPwd?'eye-o':'closed-eye'" @click="showPwd=!showPwd"/>
           </my-input>
           <button class="footBtn" @click="loginFtn">立即登录</button>
           <p class="foot_center">忘记密码</p>
           <p class="footA" @click="$router.push('/register')">还没有注册？ 立即注册</p>
        </div>
    </div>
</template>
<script>
import MyInput from '../../components/myInput';
import { reactive,toRefs } from 'vue';
import { login } from '../../api/second/index.js';
import { useRouter } from 'vue-router';
export default {
  components:{MyInput},
  setup(props) {
    const { push } = useRouter();
    const data = reactive({
       phonePass: 0, // 0代表没有触摸过，1代表成功，2代表失败 手机号的验证状态
       pwdPass: 0, // 0代表没有触摸过，1代表成功，2代表失败 密码的验证状态
       showPwd: false,
       mobile: '', // 手机号
       pwd: '' // 密码
    })
    let phre = /^1[3-9][0-9]{9}$/; // 手机号的正则
    const rePhone = () => { // 手机号失去焦点的函数
    //    console.log(phre.test(data.mobile));
      data.phonePass = phre.test(data.mobile)? 1 : 2;
    }
    const rePwd = () => { // 密码的验证函数
      data.pwdPass = data.pwd?1:2;
    }

    const loginFtn = () => { // 登录的函数
      if (data.phonePass!=2 && data.pwdPass!=2){
         login({mobile:data.mobile,pwd:data.pwd}).then(res => {
            if(res.code == 0){
              localStorage.setItem('token',res.data.token);
               push('/');
            }
         })
      }
    }
    return {
      rePhone,
      rePwd,
      loginFtn,
      ...toRefs(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.login{
  height: 100%;
  box-sizing: border-box;
  padding: 30px;
  .content{
    border: 1px solid #f5f5f5;
    padding: 0 30px;
    h4{
      margin-top: 35px;
    }
    p{
      font-size: 13px;
      color: #909090;
      margin: 45px 0 20px;
    }
    .footBtn{
      width: 210px;
      height: 42px;
      margin: 20px auto;
      border-radius: 5px;
      display: block;
      border: none;
      background: linear-gradient(90deg, #5ea6f8, #bb87f6);
      color: #fff;
      font-size: 14px;
    }
    .foot_center{
      text-align: center;
      margin-top: 10px !important;
    }
    .footA{
      text-align: center;
      color: #549ff9 !important;
      margin-top: 20px !important;
    }
    .van-icon{
      font-size: 20px;
    }
    .err{
      font-size: 12px;
      color: red;
      margin-right: 5px;
    }
  }
}
</style>

